<template>
    <view>
        <view  v-if="messagesList.length == 0" class="kong_box">
            <u-empty mode="message" icon="http://cdn.uviewui.com/uview/empty/car.png">
        </u-empty>
        </view>
        <view class="container">
            <view class="message-list" v-for="(item, index) in messagesList" :key="index">
                <view class="message_time">
                    {{ item.created_at }}
                </view>
                <view class="message_concent">
                    <rich-text :nodes="item.contents"></rich-text>
                </view>
            </view>
        </view>
        

    </view>
</template>
  
<script>
export default {
    data() {
        return {
            messagesList: [],
            page: 1,
            totalPage: ''
        };
    },
    onShow() {
        this.init()
    },
    onReachBottom() {
        if (this.page > this.totalPage) {
            return
        }
        this.page++
        this.init(2)
    },
    onPullDownRefresh() {
        this.page = 1
        this.init()
        uni.stopPullDownRefresh()
    },
    methods: {
        init(type) {
            let data = {
                page: this.page
            }
            this.$Request.get(this.$api.user.messages, data).then(res => {
                this.totalPage = res.totalPage
                if (type == 2) {
                    this.messagesList = this.messagesList.concat(res.data)
                } else {
                    this.messagesList = res.data
                }

            })
        }

    }
};
</script>
  
<style lang="scss" scoped>
.kong_box{
    width: 100vw;
    height: 100vh;
}
.container {
    height: 100%;
    background-color: #F6F6F6;
    padding-top: 90rpx;

    .message-list {
        //消息盒子
        position: relative;
        width: 94%;
        // height: 300rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        margin: auto;
        margin-bottom: 90rpx;
        padding: 30rpx 30rpx;

        .message_time {
            width: 100%;
            text-align: center;
            position: absolute;
            top: -55rpx;
            transform: translate(-50%);
            left: 50%;
            height: 32rpx;
            line-height: 32rpx;
            color: #999999;
            font-size: 22rpx;
        }

        .message_concent {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;

            .message_txt {
                color: #FA2929;
            }
        }


    }
}
</style>